<template>
  <div class="aside-btn" v-if="Route.name != 'home'">
    <transition
      appear
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__faster  animate__backInUp"
      leave-active-class="animate__animated animate__faster animate__backOutDown"
    >
      <div class="btn-container">
        <div v-for="(item, index) in locationList" :key="index">
          <div
            v-if="item.status"
            class="location-item alert-item"
            :class="
              location.$state.LocationIndex == index + 1
                ? 'alertcurrentLoction'
                : ''
            "
            @click.stop="changeTab(item, index)"
          >
            <!-- <svg-icon
              :icon="item.status ? '区域导航_告警' : '区域导航'"
              class="icon"
            ></svg-icon> -->
            <div
              class="tri"
              v-if="location.$state.LocationIndex == index + 1"
              style="border-color:  rgba(255, 63, 52, 1);border-left-color:transparent;border-right-color: transparent;"
            ></div>
            <div>
              {{ item.name }}
            </div>
          </div>

          <div
            v-if="!item.status"
            class="location-item"
            :class="
              location.$state.LocationIndex == index + 1
                ? 'currentLoction '
                : ''
            "
            @click.stop="changeTab(item, index)"
          >
            <!-- <svg-icon :icon="'区域导航'" class="icon"></svg-icon> -->
            <div
              class="tri"
              v-if="location.$state.LocationIndex == index + 1"
            ></div>
            <div>
              {{ item.name }}
            </div>
            <!-- <errorBox
              @click.stop
              v-if="index == 1"
              locationCode="ALL"
            ></errorBox> -->
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, computed } from "vue";
import { useRoute } from "vue-router";
import { useFloorStore } from "@/stores/floor";
import { useAppStore } from "@/stores/modules/app";
import { UseLocation } from "@/stores/location";
import { UseLocationaside } from "@/stores/locationaside";
const { activeIndex, itemIndex } = toRefs(useFloorStore());
const { setActive, setItem } = useFloorStore();
const Route = useRoute();
const location = UseLocation();
// 鼠标点击事件
const locationaside = UseLocationaside();
const locationList = computed(() => {
  return locationaside.$state.locationArr;
});
const changeTab = (item, index) => {
  location.SetLocationIndex(index + 1);
  setItem(-1);
  setActive(index);
};
</script>

<style scoped lang="scss">
.aside-btn {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  transform: translate(-50%, 0);
  z-index: 9;
  height: clamp(2.125rem, -0.625rem + 2.29vw, 4.875rem);
  display: flex;
  align-items: center;

  .btn-container {
    display: flex;

    .location-item {
      position: relative;
      background: url("./../../assets/image/dashboard/分区标签.png") center
        no-repeat;
      // width: clamp(5.438rem, 4.53vw, 10.875rem);
      // height: clamp(2.125rem, -0.625rem + 2.29vw, 4.875rem);
      width: clamp(6.25rem, 5.21vw, 12.5rem);
      height: clamp(2.5rem, 2.08vw, 5rem);
      // background: rgba(5, 45, 77, 0.6);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      cursor: pointer;
      margin-bottom: clamp(1.25rem, 1.04vw, 2.5rem);
      box-sizing: border-box;
      font-weight: bold;
      font-size: clamp(1rem, 0.83vw, 2rem);
      color: rgba(38, 190, 255, 1);
      .icon {
        font-size: clamp(1rem, 0.83vw, 2rem);
        margin-right: clamp(0.688rem, 0.57vw, 1.375rem);
      }
    }
    .alert-item {
      background: url("./../../assets/image/dashboard/分区标签_告警.png") center;
      background-size: 100% 100%;
      color: rgba(255, 63, 52, 1) !important;
    }
  }
}
.tri {
  top: -80%;
  position: absolute;
  margin: clamp(1.25rem, 1.04vw, 2.5rem) auto;
  /*内容宽高均为0*/
  width: 0px;
  height: 0px;
  border: clamp(0.625rem, 0.52vw, 1.25rem) solid rgba(25, 208, 245, 1);
  /*下边框设为none*/
  border-bottom: none;
  /*左右设为透明色*/
  border-left-color: transparent;
  border-right-color: transparent;
}
</style>
